import React from 'react'
import {Radio, Row} from 'antd'
import {radioStyle} from '../../../constant/constant-style'
import { FormattedMessage } from 'react-intl'
import {TwsReactMarkdownPreview} from 'tws-antd'

const RadioGroup = Radio.Group

const SingleChoice = ({formItemLayout, FormItem, quiz}) => {
  const {choices, answer} = quiz

  return (
    <Row>
      <FormItem {...formItemLayout} label={<FormattedMessage id='描述' />}>
        <TwsReactMarkdownPreview source={quiz.description} />
      </FormItem>
      <FormItem {...formItemLayout} label={<FormattedMessage id='选项' />}>
        <RadioGroup value={answer}>
          {choices.map((option, index) => {
            return (
              <Radio style={radioStyle} value={`${index}`} key={index} disabled>
                <span>{option}</span>
              </Radio>
            )
          })}
        </RadioGroup>
      </FormItem>
    </Row>)
}

export default SingleChoice
